<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js" charset="utf-8"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script src="/static/js/xadmin.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a><cite>分类管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="layui-card">
    <div class="layui-container">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md7">
                <table class="layui-table" id="cate" lay-filter="cate"></table>
            </div>
            <div class="layui-col-md5">
                <form name="addCate" class="layui-form layui-form-pane" action="">
                    <div class="layui-card-header">添加分类</div>
                    <div class="layui-card-body ">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" autocomplete="off" placeholder="请输入分类名"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属分类</label>
                            <div class="layui-input-block">
                                <input type="text" name="pid" autocomplete="off" placeholder="请输入所属分类（不属于任何分类则留空）"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn layui-btn-lg" style="float: right"
                                    onclick="postForm()">
                                添加
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    loadCateTable()

    function loadCateTable() {
        layui.use('table', function () {
            let table = layui.table;
            table.render({
                elem: '#cate'
                , url: '/admin/product/getCatesList'
                , cols: [[
                    {field: 'id', title: '分类ID', width: 80, fixed: 'left', align: 'center'}
                    , {field: 'title', title: '分类名'}
                    , {field: 'pid', title: '所属分类ID', width: 100, align: 'center'}
                    , {field: 'add_time', title: '添加时间', width: 150, align: 'center'}
                    , {field: 'status', title: '上下架', width: 80, templet: (d) => productStatus(d),fixed: 'right'}
                ]]
            });

        })
    }

    function postForm() {
        axios({
            url: '/index.php/admin/Product/addCate',
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            params: {},
            data: {
                title: document.addCate.title.value,
                pid: document.addCate.pid.value,
            },
        }).then((res) => {
            console.log(res)
            if (res.data.code === 0) {
                loadCateTable()
            }
        })
    }
</script>

<script id="slot_status">
    function productStatus(d) {
        if (d.status === 1) {
            return '<div class="layui-form"> <input type="checkbox" checked lay-skin="switch" name="statusSwitch" lay-filter="statusSwitch" data-id=' + d.id + '' +
                ' lay-text="上架|下架"  value=' + d.status + '></div>';
        }
        return '<div class="layui-form"> <input type="checkbox" lay-skin="switch" name="statusSwitch" data-id=' + d.id + ' lay-filter="statusSwitch"' +
            'lay-text="上架|下架" value=' + d.status + '></div>';
    }

    layui.use('form', (form) => {
        form.on('switch(statusSwitch)', function (data) {
            axios.get('/index.php/admin/product/uploadCateStatus', {
                params: {
                    id: data.elem.getAttribute('data-id'),
                    status: data.elem.checked === true ? 1 : 0
                }
            }).then(res => {
                console.log(res)
                if (res.data.code !== 0) {
                    layer.msg('修改失败', {icon: 2});
                    return;
                }
                layer.msg('修改成功', {icon: 1, time: 1500});
            });
        })
    });
</script>
</html>
